<template>
  <div class="w-100%">
    <el-form :inline="true" :model="formInline" @submit.prevent class="demo-form-inline">
      <el-row :gutter="10">
        <el-col :span="6"
          ><el-form-item class="w-100%" label="应用名称">
            <el-input
              class="w-100%"
              v-model="formInline.name"
              placeholder="应用名称"
              clearable
            /> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="add">新增</el-button>
          <el-button @click="testFn('light')">点亮</el-button>
          <el-button @click="testFn('dark')">关闭</el-button>
        </el-col>
      </el-row>
    </el-form>
    <Dialog
      @close="close"
      :visible="visible"
      width="80%"
      height="400px"
      title="应用管理"
      @submit="submit"
    >
      <addForm ref="addFormEl"></addForm>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import Dialog from '@/components/Dialog/Dialog.vue'
import addForm from './addForm.vue'
import { ElMessage } from 'element-plus'
import { addMainMenu, test } from '@/api'

const formInline = reactive({
  name: ''
})
const emit = defineEmits(['search'])
const addFormEl = ref<InstanceType<typeof addForm> | null>(null)
const visible = ref(false)
const add = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}
const testFn = (light) => {
  test({
    light
  }).then((res) => {
    console.log(res)
  })
}
const submit = () => {
  if (addFormEl.value) {
    addFormEl.value.ruleFormRef?.validate((valid: boolean) => {
      if (valid) {
        addMainMenu(addFormEl.value?.ruleForm).then((res: any) => {
          console.log(44444, res)
          if (res?.code == 200) {
            visible.value = false
            ElMessage({
              message: res.message,
              type: 'success'
            })
            emit('search', formInline)
          } else {
            ElMessage({
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    })
  }
}
const search = () => {
  emit('search', formInline)
}
</script>
<style lang="less" scoped>
/deep/.el-form--inline {
  .el-form-item {
    margin-right: 0px;
    margin-bottom: 0px;
  }
}
</style>
